<template>
    <div class="comment-child">

        <!--            评论人信息-->
        <div class="comment-who">
            <div>
                <span class="from-username username">{{commentChild.fromUser.username}}</span>
                <font-awesome-icon class="at" :icon="['fas', 'at']"/>
                <span class="to-username username">{{commentChild.toUser.username}}</span>
            </div>
            <div>
                <span class="answer" @click="isShow = !isShow">回复</span>
                <span class="time">{{commentChild.createTime | format('YYYY-MM-DD HH:mm')}}</span>
            </div>
        </div>

        <!--            回复表单-->
        <div class="answer-input" v-if="isShow">
            <el-input
                    class="send-content"
                    maxlength="255"
                    minlength="1"
                    show-word-limit
                    autosize
                    resize="none"
                    type="textarea"
                    :placeholder="'回复 '+commentChild.fromUser.username"
                    v-model="textarea">
            </el-input>
            <div class="answer-input-btn">
                <el-button size="small" type="success" @click="sendComment">提交评论</el-button>
            </div>
        </div>

        <!--            评论内容-->
        <div class="content">
            <p>{{commentChild.content}}</p>
        </div>

    </div>
</template>

<script>
    import {sendComment} from "@/api/business/comment"


    export default {
        name: 'CommentChild',
        data() {
            return {
                textarea: "",
                isShow: false,
            };
        },
        props: {
            commentChild: {
                type: Object,
                required: true
            }
        },
        methods: {
            /**
             * 发表评论
             */
            sendComment() {
                if (!this.isLogin()) {
                    this.msgError("请登录之后再评论")
                    return
                }
                if (this.textarea.trim() === "") {
                    this.msgWarn("请输入有效评论")
                    return
                }
                let params = {
                    toUser: this.commentChild.fromUser.userId,
                    type: this.commentChild.type,
                    typeId: this.commentChild.typeId,
                    content: this.textarea,
                    level: 2,
                    parentId: this.commentChild.parentId
                }
                sendComment(params).then(res => {
                    this.$emit("sendComment", res.data)
                    this.textarea = ""
                    this.msgSuccess("发表成功")
                })
            }
        },
        mounted() {
        },
        components: {}
    }
</script>

<style scoped lang='less'>
    .comment-child {
        padding: 20px;
        background-color: #F2F6FC;

        border-bottom: 1px solid #EBEEF5;

        .content {
            font-size: 13px;
            color: #909399;
            /*margin-top: 10px;*/
            line-height: 20px;

            > p {
                word-wrap: break-word;
                word-wrap: break-word;
                word-break: break-all;
                overflow: hidden;
            }
        }

        .answer-input {
            margin: 10px 0;

            .answer-input-btn {
                text-align: right;
                margin-top: 10px;
            }
        }

        .comment-who {
            width: 100%;
            display: flex;
            justify-content: space-between;
            height: 25px;
            align-items: center;

            .username {
                font-size: 13px;
                font-weight: 700;
                color: #67C23A;
                cursor: pointer;
            }

            .at {
                font-size: 13px;
                margin: 0 8px;
                color: #E6A23C;
            }

            .time {
                font-size: 12px;
                color: #909399;
                margin-left: 20px;
            }

            .answer:hover {
                color: #67C23A;
            }

            .answer {
                font-size: 12px;
                color: #909399;
                cursor: pointer;
            }
        }

    }
</style>